﻿$(function() {
    /**
	 * 电度电费
	 * */
    var daypie = echarts.init(document.getElementById('daypie'));
    optionpie = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        backgroundColor: '#e0e0e0',
        color:['#F3A43B','#999933','#9bca62'],
        legend: {
            orient: 'vertical',
            x: 'right',
            data: []
        },
        series: [{
            name: '电费',
            type: 'pie',
            radius: [0, '40%'],
            label: {
                normal: {
                    position: 'inside'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: []
        },
        {
            name: '电度',
            type: 'pie',
            radius: ['55%', '80%'],
            data: []
        }]
    };
    daypie.setOption(optionpie);

    /**
	 * 电度趋势
	 * */
    var dayline = echarts.init(document.getElementById('dayline'));
    optionline = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        backgroundColor: '#e0e0e0',
        color:["#8dc63f","#40bbea","#F3A43B","#cc3f44"],
        grid: {
            top: '15%',
            left: '4%',
            right: '5%',
            bottom: '20%',
            containLabel: true
        },
        legend: {
            bottom: '30',
            data: ['电度趋势']
        },
        xAxis: {
            type: 'category',
            boundaryGap: [1, 1],
            data: [],
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            name: '电度趋势(度)',
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        dataZoom: {
            type: 'slider',
            start: 0,
            end: 100,
            bottom: 1
        },
        series: [{
            name: '电度趋势',
            type: 'line',
            data: [],
            markPoint: {
                data: [{
                    type: 'max',
                    name: '最高电度'
                },
                {
                    type: 'min',
                    name: '最低电度'
                }]
            }
        }]
    };
    dayline.setOption(optionline);

    /**
     * 全天电度
     * */
    var daybar = echarts.init(document.getElementById('daybar'));
    optionBar = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        backgroundColor: '#e0e0e0',
        color:["#8dc63f","#40bbea","#F3A43B","#cc3f44"],
        legend: {
            bottom: '30',
            data: ['班次电度']
        },
        grid: {
            top: '10%',
            left: '4%',
            right: '4%',
            bottom: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            nameLocation: 'end',
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'category',
            name: '班次',
            data: [],
            axisLabel: {
                formatter: '{value}'
            },
            splitLine: {
                show: false
            }
        },
        series: [{
            name: '班次电度',
            type: 'bar',
            label: {
                normal: {
                    show: true,
                    formatter: '{c}度',
                    position: 'right'
                }
            },
            data: []
        }]
    };
    daybar.setOption(optionBar);
    /**
     * 初始化
     * */
    var vm = new Vue({
        el: '#itemData',
        data: {
            item: []
        }
    });
    var lineId = 0;
    var equId = 0;
    $('#ss').slider('setValue', parseInt(moment().format("x")));
    var getsliderTime = $('#ss').slider('getValue');
    var time = moment(getsliderTime).format("YYYY-MM-DD");
    getData();
    function getData() {
        $.post(basePath + "/single/singleDay/electricity.json", {
            "lineId": lineId,
            "equId": equId,
            belongDate: time
        },
        function(res) {
            vm.$set('item', res);
            if (res.success) {
                daypie.setOption({
                    legend: {
                        data: res.pieLendge
                    },
                    series: [{
                        name: '电费',
                        data: res.pieFValue
                    },
                    {
                        name: '电度',
                        data: res.pieDValue
                    }]
                });
                dayline.setOption({
                    xAxis: {
                        data: res.xTimes
                    },
                    series: [{
                        data: res.yValue
                    }]
                });
                daybar.setOption({
                    yAxis: {
                        data: res.yShifts
                    },
                    series: [{
                        data: res.xValue
                    }]
                });
            } else {
                alert(res.msg);
            }
        });
    }

    /**
     * slider滑动事件
     * */
    $('#ss').slider({
        onComplete: function(value) { //滑块值改变时触发
            time = moment(value).format('YYYY-MM-DD');
            getData();
        }
    });

    /**
     * 自定义时间按钮的点击事件
     * */
    $("#defineTime").click(function() {
        var mePanel = $('#defineTimeWin');
        mePanel.dialog('open');
    });

    /**
	  * 切换设备的点击事件
	  * */
    var mePanel = $('#switchEquip');
    $("#linetree").tree({
        onClick: function(node) {
            if (node.url) {
                lineId = node.id;
                var lineGrid = $('#lines_data');
                lineGrid.datagrid('load', {
                    lineId: node.id
                });
                lineGrid.datagrid('getPanel').panel('setTitle', node.text);
            }
        }
    });
    $('#lines_data').datagrid({
        //双击设备时，根据选中设备刷新
        onDblClickRow: function(rowIndex, rowData) {
            lineId = rowData.lineId;
            equId = rowData.id;
            time = moment($('#ss').slider('getValue')).format("YYYY-MM-DD");
            getData();
            mePanel.dialog('close');
        }
    });
    $("#switchEquipOK").click(function() {
        var row = $('#lines_data').datagrid('getSelected');
        if (row) {
            lineId = row.lineId;
            equId = row.id;
            time = moment($('#ss').slider('getValue')).format("YYYY-MM-DD");
            getData();
            $('#switchEquip').dialog('close');
        } else {
            $.messager.alert({
                showSpeed: 100,
                title: '消息提示',
                msg: '请选择一条设备记录!',
                timeout: 3000
            });
        }
    });
});